<script>
  export default {
    render: function (h) {
      // create kebabCase id
      let e = this.element;
      let click = this.clc;
      let dClick = this.dclc;
      let step = [1, false, false, false, false, false, false];
      step[e.brgRegionStatus] = true;
      let _class = {
        selectedState: e.select,
        aisle: step[1],
        undefined: step[2],
        storageArea: step[3],
        sortingArea: step[4],
        temporaryStorageArea: step[5],
        unqualifiedArea: step[6],
      };

      return h('li', {
        'class': _class,
        style: {
          color: '#000',
        },
        attrs: {
          row: e.row,
          col: e.col,
        },
        on: {
          click: function () {
            if (e.brgRegionStatus === -1) return;
            click(e.click());
          },
          dblclick: function () {
            if (e.brgRegionStatus === -1) return;
            dClick(e.click());
          },
        },
      }, e.brgRegionNo);
    },
    props: {
      element: {
        type: Object,
        required: true,
      },
      elementPId: 0,
      clc: '',
      dclc: '',
    },
  };
</script>
